<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#grad1 {
	    height: 200px;
	    background: -webkit-linear-gradient(left, rgba(44,187,232,0.4), rgba(33,129,210,1)); /* Safari 5.1 - 6.0 */
	    background: -o-linear-gradient(right, rgba(44,187,232,0.4), rgba(33,129,210,1)); /* Opera 11.1 - 12.0 */
	    background: -moz-linear-gradient(right, rgba(44,187,232,0.4), rgba(33,129,210,1)); /* Firefox 3.6 - 15 */
	    /* 标准的语法（必须放在最后） */
	    background: linear-gradient(to right, rgba(44,187,232,0.4), rgba(33,129,210,1));
	}
	#grad2 {
	    height: 200px;
	    background: -webkit-linear-gradient(left, rgba(249,212,7,0.7), rgba(248,137,48,0.7)); /* Safari 5.1 - 6.0 */
	    background: -o-linear-gradient(right, rgba(249,212,7,0.7), rgba(248,137,48,0.7)); /* Opera 11.1 - 12.0 */
	    background: -moz-linear-gradient(right, rgba(249,212,7,0.7), rgba(248,137,48,0.7)); /* Firefox 3.6 - 15 */
	    /* 标准的语法（必须放在最后） */
	    background: linear-gradient(to right, rgba(249,212,7,0.7), rgba(248,137,48,0.7));
	}
	/*线性渐变 - 对角*/
	#grad3 {
	    height: 200px;
	    background: -webkit-linear-gradient(left bottom, rgba(249,212,7,0.7), rgba(248,137,48,0.7)); /* Safari 5.1 - 6.0 */
	    background: -o-linear-gradient(right top, rgba(249,212,7,0.7), rgba(248,137,48,0.7)); /* Opera 11.1 - 12.0 */
	    background: -moz-linear-gradient(right top, rgba(249,212,7,0.7), rgba(248,137,48,0.7)); /* Firefox 3.6 - 15 */
	    /* 标准的语法（必须放在最后） */
	    background: linear-gradient(to right top, rgba(249,212,7,0.7), rgba(248,137,48,0.7));
	}

	</style>
</head>
<body>
<div id="grad1"></div>
<div id="grad2"></div>
<div id="grad3"></div>	
</body>
</html>